<!DOCTYPE html>
<html>

<head>
    <!-- 基本元数据 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Management</title>
    
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/style.css">
    
    <!-- 内部样式 -->
    <style>
        /* 表格样式 */
        table {
            width: 70%;
            border-collapse: collapse;
        }

        /* 单元格样式 */
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        /* 表头样式 */
        th {
            background-color: #f2f2f2;
        }

        /* 操作图标样式 */
        .action-icons i {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="header">
    </nav>
    
    <!-- 主内容区域 -->
    <div class="row justify-content-center my-3 w-100">
        <table id="courseTable">
            <thead>
                <tr>
                    <th>周一</th>
                    <th>周二</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例行 -->
                <tr>
                    <td>数学<div class="action-icons">
                            <i class="bi bi-pencil-square edit-icon"></i>
                            <i class="bi bi-trash-fill delete-icon"></i>
                        </div>
                    </td>
                    <td>
                        <div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>
                    </td>
                    <td>
                        <div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <!-- 页脚 -->
    <footer class="mt-auto bg-light py-3">
    </footer>
    
    <!-- 引入外部脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/course-ex.js"></script>
    
    <!-- 主脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 处理新增图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('add-icon')) {
                    const cell = e.target.closest('td');
                    cell.innerHTML = `<input type="text" class="form-control new-course-input">`;
                    cell.querySelector('.new-course-input').focus();
                }
            });

            // 处理文本框失去焦点
            document.addEventListener('blur', function(e) {
                if (e.target.classList.contains('new-course-input')) {
                    const cell = e.target.closest('td');
                    const courseName = e.target.value.trim();
                    if (courseName) {
                        cell.innerHTML = `${courseName}<div class="action-icons">
                            <i class="bi bi-pencil-square edit-icon"></i>
                            <i class="bi bi-trash-fill delete-icon"></i>
                        </div>`;
                    } else {
                        cell.innerHTML = `<div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>`;
                    }
                }
            }, true);

            // 处理删除图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-icon')) {
                    const cell = e.target.closest('td');
                    cell.innerHTML = `<div class="action-icons">
                        <i class="bi bi-plus-circle add-icon"></i>
                    </div>`;
                }
            });

            // 处理编辑图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('edit-icon')) {
                    const cell = e.target.closest('td');
                    const courseName = cell.textContent.trim().replace(/\s*<div.*?<\/div>\s*/, '');
                    // 保存原始课程信息
                    cell.dataset.originalCourse = courseName;
                    cell.innerHTML = `<input type="text" class="form-control edit-course-input" value="${courseName}">`;
                    cell.querySelector('.edit-course-input').focus();
                }
            });

            // 处理编辑文本框失去焦点
            document.addEventListener('blur', function(e) {
                if (e.target.classList.contains('edit-course-input')) {
                    const cell = e.target.closest('td');
                    const courseName = e.target.value.trim();
                    if (courseName) {
                        cell.innerHTML = `${courseName}<div class="action-icons">
                            <i class="bi bi-pencil-square edit-icon"></i>
                            <i class="bi bi-trash-fill delete-icon"></i>
                        </div>`;
                    } else {
                        if (confirm('是否确认输入信息为空会删除课程？')) {
                            cell.innerHTML = `<div class="action-icons">
                                <i class="bi bi-plus-circle add-icon"></i>
                            </div>`;
                        } else {
                            // 使用保存的原始课程信息进行还原
                            const originalCourse = cell.dataset.originalCourse;
                            cell.innerHTML = `<input type="text" class="form-control edit-course-input" value="${originalCourse}">`;
                            // 确保聚焦到编辑文本框
                            setTimeout(() => {
                                cell.querySelector('.edit-course-input').focus();
                            }, 0);
                        }
                    }
                }
            }, true);
        });
    </script>
</body>

</html>
